@using OrchardCore.Workflows.ViewModels;
@model ScriptTaskViewModel

<div class="form-group" asp-validation-class-for="AvailableOutcomes">
    <label asp-for="AvailableOutcomes">@T["Available Outcomes"]</label>
    <input asp-for="AvailableOutcomes" class="form-control" />
    <span asp-validation-for="AvailableOutcomes"></span>
    <span class="hint">@T["A comma-separated list of available outcomes."]</span>
</div>

<div class="form-group" asp-validation-class-for="Script">
    <label asp-for="Script">@T["Script"]</label>
    <textarea asp-for="Script" class="form-control" placeholder="e.g. js: setOutcome('Done');"></textarea>
    <span asp-validation-for="Script"></span>
    <span class="hint">@T["The script to execute. Make sure to call `setOutcome` with any of the specified available outcomes at least once."]</span>
</div>

<script asp-name="codemirror" depends-on="admin" at="Foot"></script>
<script asp-name="codemirror-mode-javascript" at="Foot"></script>
<script asp-name="codemirror-addon-display-autorefresh" at="Foot"></script>
<script asp-name="codemirror-addon-mode-simple" at="Foot"></script>
<script asp-name="codemirror-addon-mode-multiplex" at="Foot"></script>
<script asp-name="codemirror-mode-xml" at="Foot"></script>

<script at="Foot">
$(function () {
    var editor = CodeMirror.fromTextArea(document.getElementById('@Html.IdFor(x => x.Script)'), {
        autoRefresh: true,
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: { name: "javascript" },
      });

    editor.on('change', function (cm) {
        document.getElementById('@Html.IdFor(x => x.Script)').value = cm.getValue();
    });
});
</script>
